<template>

    <div>

        <h2>公告列表</h2>

        <div class="container">
            <div>
                <el-button type="primary" @click="addData" size="mini">发布公告</el-button>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="内容"
                        >
                </el-table-column>`
                <el-table-column
                        label="操作" fixed="right" width="150"
                >
                    <template slot-scope="scope">
                        <el-button @click="editData(scope.row)" size="mini">编辑</el-button>
                        <el-button @click="deleteData(scope.row)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-dialog  title="导航" v-if="infoItem" :visible.sync="dialogNavVisible">
            <div>
                <el-form ref="form" :model="infoItem" label-width="80px">
                    <el-form-item label="公告内容">
                        <el-input v-model="infoItem.content" type="textarea"></el-input>
                    </el-form-item>
                  <el-form-item label="类型">
                      <el-radio v-model="infoItem.redirect_type" label="app">APP</el-radio>
                      <el-radio v-model="infoItem.redirect_type" label="h5">H5</el-radio>
                  </el-form-item>
                  <el-form-item label="APP跳转">
                      <el-select v-model="infoItem.redirect_to" placeholder="请选择">
                          <el-option v-for="item in app_redirect_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="H5跳转">
                      <el-select v-model="infoItem.url" placeholder="请选择">
                        <el-option v-for="item in h5_redirect_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item v-if="infoItem.redirect_type=='h5'" label="H5链接">
                      <el-input v-model="infoItem.url" size="small" style="width:300px"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="doSubmit">保存数据</el-button>
                    <el-button @click="doCancel">取消</el-button>
                  </el-form-item>
                </el-form>
            </div>
        </el-dialog>

    </div>

</template>
<script>
    export default {
      data() {
        return {
          items: [],
          loading: true,
          params: {
          },
          total: 0,
          dialogNavVisible:false,
          dialogVisible:false,
          dialogImageUrl: '',
          infoItem:{},
          app_redirect_list:[],
          h5_redirect_list:[]
        }
      },
      created() {
        this.fetch();
        this.fetchOptions();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/notice/search', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        fetchOptions() {
          axios.get('/admin/api/notice/options', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.h5_redirect_list = res.data.data.h5_redirect_list;
              this.app_redirect_list = res.data.data.app_redirect_list;
              this.location_list = res.data.data.location_list;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;

        },

        handleSuccess(res,file,filelist){
          console.log(res);
          if(res.code==0){
            this.imagelist = [];
            this.imagelist.push({id:res.data.id,name:res.data.id,url:res.data.file_url});
          }
        },

        handleRemove(file, fileList) {
          console.log(file)
          for(var i=0;i<this.imagelist.length;i++){
              if(this.imagelist[i].id==file.id){
                this.imagelist.splice(i,1)
              }
          }
        },

        addData:function(){
           this.dialogNavVisible = true;
           this.imagelist = [];
           this.infoItem = {};
        },

        doSubmit() {
          for(var i=0;i<this.imagelist.length;i++){
            this.infoItem.image_id = this.imagelist[i].id;
          }
          let url = '';
          if(this.infoItem.id){
            url = '/admin/api/notice/update';
          }else{
            url = '/admin/api/notice/add';
          }

          axios.post(url,this.infoItem).then(res=>{
            if(res.data.code==0){
                this.dialogNavVisible = false;
                this.infoItem = {};
                this.fetch();
            }
          })
        },

        doCancel() {
          this.dialogNavVisible = false;
        },

        editData(data){
          this.dialogNavVisible = true;
          this.infoItem = data;
          this.imagelist = [];
          this.imagelist.push({id:data.image.id,name:data.image.id,url:data.image.file_url});
        },

        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        deleteData(data){
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              axios.post('/admin/api/notice/delete',{id:data.id}).then(res=>{
                this.fetch();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
        }
      }
    }
</script>